<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>音频可视化</title>
</head>
<body>

<audio id="audio" autoplay="autoplay" controls="controls" loop="loop">
    <source src="../闺蜜的话.m4a" />
</audio>
<canvas style="z-index: -99999999;position: fixed;top:0;left :0"></canvas>
<script>
     let audioElement = document.getElementById("audio")
    // let audioContext = new AudioContext()
    // let source = audioContext.createMediaElementSource(audioElement);
    // let analyser = audioContext.createAnalyser();
    // let audioByte = new Uint8Array(analyser.frequencyBinCount);
    // analyser.fftSize = 512;
    // analyser.minDecibels = -90;
    // analyser.maxDecibels = -10;
    // analyser.smoothingTimeConstant = 0.85;
    // source.connect(analyser);
    // analyser.connect(audioContext.destination);
    //
    // console.log(audioByte)


     audioElement.onended= function(){
         console.log("加载完成")
     }

    spectrogram(audioElement)

    function spectrogram(playingAudioTag) {

        console.log("已经进入频谱显示模块");
        console.log(playingAudioTag);

        let source;
        // var audioCtx = null;
        let audioCtx = new (window.AudioContext || window.webkitAudioContext)();

        let analyser = audioCtx.createAnalyser();
        analyser.minDecibels = -90;
        analyser.maxDecibels = -10;
        analyser.smoothingTimeConstant = 0.85;

        //canvas绘图区域设置
        let canvas = document.querySelector('canvas');
        let canvasCtx = canvas.getContext("2d");
        let intendedWidth = window.innerWidth;
        let intendedHeight = window.innerHeight
        canvas.setAttribute('width',""+intendedWidth);
        canvas.setAttribute('height',""+intendedHeight);

        let drawVisual;

        source = audioCtx.createMediaElementSource(playingAudioTag);
        // console.log("source输出");
        // console.log(source);
        source.connect(analyser);
        analyser.connect(audioCtx.destination);


        console.log(audioCtx);

            visualize();


        function visualize() {

            let WIDTH = canvas.width;
            let HEIGHT = canvas.height;

            analyser.fftSize = 256;
            let bufferLengthAlt = analyser.frequencyBinCount;
            // console.log(bufferLengthAlt);
            let dataArrayAlt = new Uint8Array(bufferLengthAlt);
            // console.log(dataArrayAlt);

            canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);

            // var s = 0;
            let drawAlt = function() {

                // setTimeout(drawAlt,1000);
                // console.log("进入drawAlt");
                drawVisual = requestAnimationFrame(drawAlt);

                analyser.getByteFrequencyData(dataArrayAlt);

                canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
                canvasCtx.fillStyle = 'rgba(255,255,255,0)';
                canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);


                let barWidth = (WIDTH / bufferLengthAlt) ;
                let barHeight;
                let x = 0;

                for(let i = 0; i < bufferLengthAlt; i++) {

                    barHeight = dataArrayAlt[i] * 0.7;
                    // console.log(barHeight);
                    // console.log(color);

                    canvasCtx.fillStyle = 'rgb(' + (barHeight + 170) + ',' + (barHeight + 170) * 0.7 + ',' + (barHeight + 170) * 0.7 + ')';
                    canvasCtx.fillRect(i*(barWidth+1),HEIGHT-barHeight/2,barWidth,barHeight/2);
                    x += barWidth + 1;
                }
            };

            drawAlt();

        }

    }
</script>
</body>
</html>
